<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>连连看正式版本v1.0.0</title>
  </head>
  <!-- 有bug!!!!!!!!
    重新写吧 -->
  <!-- 正式版本,拥有自动模式,提示按钮,死局判断按钮-->
  <!-- 玩法介绍 -->
  <!-- 点击相同图案的方块,如果存在两个拐点内可以连接且无其他方块的通路时,进行消除,消除时加两秒时间 -->
  <!-- 适应手机竖屏与横屏屏幕大小 -->
  <!-- 拐点在方块周围时无法画线的bug,不影响游玩 -->
  <!-- 准备添加,,难度选择,外围空判定,死局自动打乱功能 -->
  <body body onconTextmenu="window.event.returnValue =false"></body>
  <body body onselectstart="return false"></body>
  <style type="text/css">
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style-type: none;
    }

    img {
      width: 100%;
      height: 100%;
    }

    body {
      background-color: bisque;
    }
    @media screen and (orientation: portrait) {
      #box {
        width: 70%;
        margin: 25vh auto;
        position: relative;
      }
      #tools {
        position: absolute;
        width: 100%;
        top: -20%;
        left: 50%;
        transform: translate(-50%, -50%);
        display: flex;
        justify-content: space-around;
        visibility: hidden;
      }
      #boxs {
        width: 100%;
        padding-bottom: 100%;
        height: 0;
        visibility: hidden;
        box-sizing: border-box;
        position: relative;
      }
      #head {
        width: 100%;
        height: 10vh;
      }
      #start {
        font-size: 5vw;
        line-height: 200%;
      }
    }
    @media screen and (orientation: landscape) {
      #box {
        width: 70%;
        margin: 0 auto;
        position: relative;
      }
      #tools {
        width: 15%;
        position: absolute;
        top: 20%;
        left: 85%;
        visibility: hidden;
      }
      #boxs {
        width: 75vh;
        height: 75vh;
        margin: 0 auto;
        visibility: hidden;
        box-sizing: border-box;
        position: relative;
      }
      #head {
        width: 100%;
        height: 15vh;
      }
      #start {
        font-size: 5vh;
      }
    }

    #start {
      width: auto;
      max-width: 40%;
      height: 50%;
      margin: 3vh auto;
      font-weight: bold;
      background-color: crimson;
      box-shadow: 1px 1px 3px 3px brown;
      text-align: center;
      color: white;
      transition: all 0.2s;
    }

    #start:hover {
      background-color: red;
      color: yellow;
      width: auto;
      max-width: 42%;
      height: 52%;
      font-size: 5.2vh;
      cursor: pointer;
    }

    #time {
      width: 100%;
      height: 50%;
      line-height: 200%;
      font-weight: bold;
      text-align: center;
      display: none;
    }

    #pro {
      width: 100%;
    }
    #boxs > li {
      width: 100%;
      padding-bottom: 10%;
      height: 0;
    }

    #boxs > li > span {
      display: inline-block;
      width: 10%;
      padding-bottom: 10%;
      height: 0;
      position: relative;
      background-color: antiquewhite;
      box-sizing: border-box;
      color: rgba(255, 255, 255, 0);
    }
  </style>

  <body>
    <div id="box">
      <div id="head">
        <p id="start">开始游戏</p>
        <p id="time">
          <progress id="pro" value="120" max="120"></progress><br />
          剩余时间 <span id="second">120</span>
        </p>
      </div>
      <div id="tools">
        <p><input type="button" value="提示" id="prompts" /></p>
        <p><input type="button" value="自动模式" id="autos" /></p>
        <p><input type="button" value="判断死局" id="judges" /></p>
      </div>
      <ul id="boxs">
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
        <li>
          <span></span><span></span><span></span><span></span><span></span
          ><span></span><span></span><span></span><span></span><span></span>
        </li>
      </ul>
    </div>
    <script>
      var border_text = "0.7";
      var boxs = document.getElementById("boxs");
      var strat = document.getElementById("start");
      var time = document.getElementById("time");
      var second = document.getElementById("second");
      var pro = document.getElementById("pro");
      var tools = document.getElementById("tools");
      var prompts = document.getElementById("prompts");
      var autos = document.getElementById("autos");
      var judges = document.getElementById("judges");
      strat.onclick = function () {
        strat.style.display = "none";
        boxs.style.visibility = "visible";
        tools.style.visibility = "visible";
        time.style.display = "block";
        lists(arr.length * arr[0].length);
        var seconds = setInterval(function () {
          second.innerText = second.innerText - 1;
          pro.value = second.innerText;
          if (second.innerText == 0) {
            clearInterval(seconds);
            alert("失败");
            window.location.reload();
          }
        }, 1000);
      };
      prompts.onclick = function () {
        checks(false, true);
      };
      var autoDelete = "";
      autos.onclick = function () {
        if (autos.value == "自动消除中") {
          autos.value = "自动模式";
          clearInterval(autoDelete);
        } else {
          autos.value = "自动消除中";
          autoDelete = setInterval(function () {
            if (checks(false, false)) {
              checks(true, false);
            } else {
              autos.value = "自动模式";
              clearInterval(autoDelete);
              alert("已经没有可以消除的了,正在打乱棋盘中");
              lists(death());
            }
          }, 1500);
        }
      };
      judges.onclick = function () {
        if (!checks(false, false)) {
          alert("已经没有可以消除的了,正在打乱棋盘中");
          lists(death());
        } else {
          alert("还有可以消除的方块,请在多多找找");
        }
      };
      function death() {
        let counts = 0;
        for (let i = 0; i < arr.length; i++) {
          for (let j = 0; j < arr[i].length; j++) {
            if (arr[i][j].style.visibility != "hidden") {
              counts++;
              arr[i][j].style.visibility = "hidden";
            }
          }
        }
        return counts;
      }
      function positions() {
        this.setpositions = function (obj) {
          this.x = Math.floor(Number(obj.offsetLeft) / standard);
          this.y = Math.floor(Number(obj.offsetTop) / standard);
          this.b = true;
        };
        this.deletes = function () {
          this.b = false;
        };
      }
      function positionTemp(x, y) {
        this.x = Number(x);
        this.y = Number(y);
        this.b = true;
      }
      var p1 = new positions();
      var p2 = new positions();
      var standard = 0;
      var v_boxs = document.getElementById("boxs").getElementsByTagName("li");
      var arr = new Array();
      for (let i = 0; i < v_boxs.length; i++) {
        arr[i] = v_boxs[i].getElementsByTagName("span");
      }
      var count = 0;
      var arr2 = new Array();
      for (let i = 0; i < arr.length; i++) {
        for (let j = 0; j < arr[i].length; j++) {
          standard = arr[1][1].offsetLeft;
          arr[i][j].onclick = function () {
            arr2.push(arr[i][j]);
            if (arr2.length == 2) {
              p2.setpositions(arr2[1]);
              if (p1.x != p2.x || p1.y != p2.y) {
                arr2[1].style.opacity = border_text;
                setTimeout(function () {
                  links(true, false);
                }, 200);
              } else {
                cleanBox();
              }
            } else {
              p1.setpositions(arr2[0]);
              arr[i][j].style.opacity = border_text;
            }
          };
        }
      }
      function cleanBox() {
        arr2[0].style.opacity = "1";
        arr2[1].style.opacity = "1";
        p1.deletes();
        p2.deletes();
        arr2.splice(0, 2);
      }
      var divx = new Array();
      var divy = new Array();
      var count_divx = 0;
      var count_divy = 0;
      function links(b1, b2) {
        let c = false;
        if (arr2[0].innerText == arr2[1].innerText) {
          if (zeros(p1, p2) || ones(p1, p2) || twos(p1, p2)) {
            c = true;
            if (b1) {
              deleteBox();
            }
            if (b2) {
              alert(
                "第一个点坐标" +
                  (p1.y + 1) +
                  " " +
                  (p1.x + 1) +
                  " 第二个点坐标" +
                  (p2.y + 1) +
                  " " +
                  (p2.x + 1)
              );
            }
          }
        }
        cleanBox();
        if (count == 100) {
          alert("胜利");
        }
        return c;
      }
      function deleteBox() {
        draws();
        arr2[0].style.visibility = "hidden";
        arr2[1].style.visibility = "hidden";
        count += 2;
        if (second.innerText <= 118) {
          second.innerText = Number(second.innerText) + 2;
        }
      }
      function lists(counts) {
        let r_arr1 = new Array();
        for (let i = 0; i < counts / 2; i++) {
          if (i < 20) {
            r_arr1[i] = i;
          } else {
            r_arr1[i] = Math.floor(Math.random() * 20);
          }
        }
        let r_arr2 = r_arr1.slice(0, r_arr1.length);
        var r_arr = [].concat(r_arr1, r_arr2);
        for (let i = 0; i < r_arr.length; i++) {
          let r = Math.floor(Math.random() * r_arr.length);
          let temp = r_arr[i];
          r_arr[i] = r_arr[r];
          r_arr[r] = temp;
        }
        let a = 0;
        for (let i = 0; i < arr.length; i++) {
          for (let j = 0; j < arr[i].length; j++) {
            if (a < r_arr.length) {
              arr[i][j].innerText = r_arr[a];
              arr[i][j].style.backgroundImage =
                "url(../images/img_" + r_arr[a++] + ".png)";
              arr[i][j].style.backgroundSize = "100% 100%";
              arr[i][j].style.visibility = "visible";
            } else {
              break;
            }
          }
        }
      }
      function zeros(c1, c2) {
        if (c1.b && (c1.x == c2.x || c1.y == c2.y)) {
          let min = 0;
          let max = 0;
          if (c1.y == c2.y) {
            max = c1.x > c2.x ? c1.x : c2.x;
            min = c1.x > c2.x ? c2.x : c1.x;
            for (let i = min + 1; i < max; i++) {
              if (arr[c1.y][i].style.visibility != "hidden") {
                return false;
              }
            }
            for (let i = min + 1; i < max; i++) {
              divx[count_divx++] = new positionTemp(i, c1.y);
            }
            return true;
          }
          if (c1.x == c2.x) {
            max = c1.y > c2.y ? c1.y : c2.y;
            min = c1.y > c2.y ? c2.y : c1.y;
            for (let i = min + 1; i < max; i++) {
              if (arr[i][c1.x].style.visibility != "hidden") {
                return false;
              }
            }
            for (let i = min + 1; i < max; i++) {
              divy[count_divy++] = new positionTemp(c1.x, i);
            }
            return true;
          }
          return false;
        }
      }
      function ones(c1, c2) {
        if (arr[c1.y][c2.x].style.visibility == "hidden") {
          let t1 = new positionTemp(c2.x, c1.y);
          if (zeros(c1, t1)) {
            if (zeros(t1, c2)) {
              return true;
            } else {
              clearDraws();
            }
          }
        }
        if (arr[c2.y][c1.x].style.visibility == "hidden") {
          let t2 = new positionTemp(c1.x, c2.y);
          if (zeros(c2, t2)) {
            if (zeros(t2, c1)) {
              return true;
            } else {
              clearDraws();
            }
          }
        }
        return false;
      }
      function twos(c1, c2) {
        let i = 1;
        while (true) {
          if (c1.y - i >= 0) {
            let temp = new positionTemp(c1.x, c1.y - i);
            if (arr[temp.y][temp.x].style.visibility == "hidden") {
              if (ones(temp, c2)) {
                zeros(c1, temp);
                return true;
              }
            } else {
              break;
            }
          } else {
            break;
          }
          i++;
        }
        i = 1;
        while (true) {
          if (c1.y + i < arr.length) {
            let temp = new positionTemp(c1.x, c1.y + i);
            if (arr[temp.y][temp.x].style.visibility == "hidden") {
              if (ones(temp, c2)) {
                zeros(c1, temp);
                return true;
              }
            } else {
              break;
            }
          } else {
            break;
          }
          i++;
        }
        i = 1;
        while (true) {
          if (c1.x - i >= 0) {
            let temp = new positionTemp(c1.x - i, c1.y);
            if (arr[temp.y][temp.x].style.visibility == "hidden") {
              if (ones(temp, c2)) {
                zeros(c1, temp);
                return true;
              }
            } else {
              break;
            }
          } else {
            break;
          }
          i++;
        }
        i = 1;
        while (true) {
          if (c1.x + i < arr.length) {
            let temp = new positionTemp(c1.x + i, c1.y);
            if (arr[temp.y][temp.x].style.visibility == "hidden") {
              if (ones(temp, c2)) {
                zeros(c1, temp);
                return true;
              }
            } else {
              break;
            }
          } else {
            break;
          }
          i++;
        }
        return false;
      }
      function checks(b1, b2) {
        for (let i = 0; i < arr.length; i++) {
          for (let j = 0; j < arr[0].length; j++) {
            for (let k = 0; k < arr.length; k++) {
              for (let t = 0; t < arr[0].length; t++) {
                if (i == k && j == t) {
                  continue;
                }
                if (arr[i][j].innerText != arr[k][t].innerText) {
                  continue;
                }
                if (
                  arr[i][j].style.visibility == "hidden" ||
                  arr[k][t].style.visibility == "hidden"
                ) {
                  continue;
                }
                arr2.push(arr[i][j]);
                arr2.push(arr[k][t]);
                p1.setpositions(arr2[0]);
                p2.setpositions(arr2[1]);
                if (links(b1, b2)) {
                  return true;
                }
                console.log(arr[i][j].innerText + " " + arr[k][t].innerText);
              }
              console.log("2");
            }
            console.log("3");
          }
          console.log("4");
        }
        return false;
      }
      var divs1 = new Array();
      var divs2 = new Array();
      function draws() {
        for (let i = 0; i < divx.length; i++) {
          divs1[i] = document.createElement("div");
          divs1[i].id = "div_" + i;
          divs1[i].style.width = "200%";
          divs1[i].style.height = "0";
          divs1[i].style.paddingBottom = "5%";
          divs1[i].style.position = "absolute";
          divs1[i].style.top = "50%";
          divs1[i].style.left = "50%";
          divs1[i].style.backgroundColor = "red";
          divs1[i].style.transform = "translate(-50%, -50%)";
          arr[divx[i].y][divx[i].x].style.visibility = "visible";
          arr[divx[i].y][divx[i].x].style.background = "rgba(255, 255, 255, 0)";
          arr[divx[i].y][divx[i].x].appendChild(divs1[i]);
        }
        for (let i = 0; i < divy.length; i++) {
          divs2[i] = document.createElement("div");
          divs2[i].id = "div_" + i;
          divs2[i].style.width = "5%";
          divs2[i].style.height = "0";
          divs2[i].style.paddingBottom = "200%";
          divs2[i].style.position = "absolute";
          divs2[i].style.top = "50%";
          divs2[i].style.left = "50%";
          divs2[i].style.backgroundColor = "red";
          divs2[i].style.transform = "translate(-50%, -50%)";
          arr[divy[i].y][divy[i].x].style.visibility = "visible";
          arr[divy[i].y][divy[i].x].style.background = "rgba(255, 255, 255, 0)";
          arr[divy[i].y][divy[i].x].appendChild(divs2[i]);
        }
        setTimeout(clearDraws, 200);
      }
      function clearDraws() {
        for (let i = 0; i < divx.length; i++) {
          arr[divx[i].y][divx[i].x].style.visibility = "hidden";
        }
        for (let i = 0; i < divy.length; i++) {
          arr[divy[i].y][divy[i].x].style.visibility = "hidden";
        }
        for (let i = 0; i < divs1.length; i++) {
          document.getElementById(divs1[i].id + "").remove();
        }
        for (let i = 0; i < divs2.length; i++) {
          document.getElementById(divs2[i].id + "").remove();
        }
        count_divx = 0;
        count_divy = 0;
        divx.splice(0, divx.length);
        divy.splice(0, divy.length);
        divs1.splice(0, divs1.length);
        divs2.splice(0, divs2.length);
      }
    </script>
  </body>
</html>
